<template>
  <div>
    <van-search
  v-model="value"
  show-action
  placeholder="请输入搜索关键词"
  @search="onSearch"
  class="yanse"
  :fixed="false"
>
  <template #action>
    <div @click="onSearch">搜索</div>
  </template>
</van-search>
    <div class="hezi">
      <router-link :to="{name:'lunbo'}" class="ziti" :class="index==0?'active':''" @click="index=0">推荐</router-link>
      <router-link :to="{name:'baokuan'}" class="ziti" :class="index==1?'active':''" @click="index=1">爆款</router-link>
      <router-link :to="{name:'shuma'}" class="ziti" :class="index==2?'active':''" @click="index=2">数码</router-link>
      <router-link :to="{name:'youxi'}" class="ziti" :class="index==3?'active':''" @click="index=3">游戏</router-link>
      <router-link :to="{name:'meizhuang'}" class="ziti" :class="index==4?'active':''" @click="index=4">美妆</router-link>
      <router-link :to="{name:'chaopai'}" class="ziti" :class="index==5?'active':''" @click="index=5">潮牌</router-link>
    </div>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  data(){
    return{
      index:0,
    }
  }
};
</script>

<style scoped>
 .hezi{
  display: flex;
  justify-content: space-around;
  align-items: center;
 }
 .ziti{
  margin-left: 15px;
  font-size: 16px;
 }
 .active{
  border-bottom: 3px solid deeppink;
  color:gold
 }
 .yanse{

  background-color: green;
 }
</style>
